<template>
	<el-container class="container">
		<el-header>
			<HeadVue></HeadVue>
		</el-header>
		<el-container>
			<el-aside style="width: 200px;">
				<MenuVue :active="0" @indexFn='selectFn'></MenuVue>
			</el-aside>
			<el-main>
				<view class="notification" v-show="menuIndex==0">
					<span class="content">
						尊敬的用户，欢迎回来！
					</span>
				</view>
				<sport ref="sport" v-show="menuIndex==1"></sport>
				<user ref="user" v-show="menuIndex==2"></user>
				<admin ref="admin" v-show="menuIndex==3"></admin>
				<course ref="course" v-show="menuIndex==4"></course>
				<kg ref="kg" v-show="menuIndex==5">
				</kg>
			</el-main>
		</el-container>

	</el-container>
</template>

<script>
	const db = uniCloud.database()
	import kg from '../../components/kg.vue'
	import course from '../../components/course.vue'
	import MenuVue from '../../components/MenuVue.vue'
	import HeadVue from '../../components/HeadVue.vue'
	import user from '../../components/user.vue'
	import admin from '../../components/admin.vue'
	import sport from '../../components/sport.vue'
	export default {
		components: {
			MenuVue,
			HeadVue,
			course,
			kg,
			user,
			admin,
			sport
		},
		data() {
			return {
				menuIndex: 0
			}
		},
		onLoad() {
			if (!this.$store.getters.getLogin) {
				this.$go2Page('login')
			}
		},
		methods: {
			selectFn(data) {
				this.menuIndex = data
				if (this.menuIndex == 1) {
					this.$refs.sport.show()
				} else if (this.menuIndex == 2) {
					this.$refs.user.show()
				} else if (this.menuIndex == 3) {
					this.$refs.admin.show()
				} else if (this.menuIndex == 4) {
					this.$refs.course.show()
				} else if (this.menuIndex == 5) {
					this.$refs.kg.show()
				}
			},
		}
	}
</script>
<style lang='scss' scoped>
	.el-table {
		border-radius: 10px;
	}

	.el-header {
		padding: 0;
	}


	.add {
		&:hover {
			background-color: #4682B4;
		}
	}

	.btnStyle {
		letter-spacing: 2px;
		color: white;
		background-color: #4682b4;
		width: 50px;
		text-align: center;
		margin-top: 10px;
		border-radius: 5px;
		padding: 5px;
	}

	.el-main {
		background-color: #E9EEF3;
		padding-top: 0;
	}
</style>
<style lang="scss" scoped>
	/* 头像大小 */
	$avatar: 50px;


	.avatar {
		border-radius: 50%;
		width: $avatar;
		height: $avatar ;
	}

	.notification {
		width: 500px;
		letter-spacing: 10px;
		border-radius: 10px;
		color: white;
		margin: 10px 10px 0 20px;
		height: 100px;
		background-color: #4682B4;
		box-shadow: -10px 15px 5px #888888;
		text-align: center;
		padding-top: 20px;
		font-size: 25px;
	}
</style>